import React from 'react'
import {useParams , useNavigate , useLocation , Routes, Route, } from "react-router-dom"
import  { Component } from 'react'
var native = {}

function Login() {
    //  console.log({...native})
    native.nagtive("/1/123/123" )
}
let sparam ;

class Masklogin extends Component {
    state = {islogin:false}
    componentDidMount(){
     fetch(`/device/userlogin?userid=${this.props.id}&userpwd=${this.props.pwd}` , {
            method: 'GET',
        }).then(data => data.json())
        .then(result =>{
            if(result===1) {
             this.setState({islogin:true})
            }
        })
    }

   render(){
       return (
           <div>
             {this.state.islogin?<Reallylogin {...this.props}/>:"loding"} 
           </div>
       )
   }
}
class Reallylogin extends Component {
    render(){
        return (
            <div>
                login success!!!
            </div>
        )
    }
}

function Success() {
    sparam = useParams()
    console.log(sparam)
    // fetch(`/device/userlogin?userid=${this.props.id}&userpwd=${this.props.pwd}` , {
    //         method: 'GET',
    //     }).then(data => data.json())
    //       .then(result =>{
    //         console.log(result)
    //     })            
    return (
        <div>
           <Masklogin {...sparam}/>
        </div>
    )
}

 function Funcomponent() {
    native = {
        params :useParams() ,
        nagtive :useNavigate() ,
        locaiton:useLocation()       
    }
    return (
        <div>
            <button onClick={Login}>Login</button>
        </div>
    )
}



export default class index extends Component {
    render() {
        return (
            <div>
                <Funcomponent/>
                {/* <Link to = '/1/1/2' id = '1' pwd='2'>to</Link> */}
                <Routes>
                <Route path='/1/:id/:pwd' element={<Success/>}/>
                <Route path='/2' element={<Success/>}/>
            </Routes>
            </div>
        )
    }
}
